<template>
  <el-form ref="form" :model="form" :rules="rules" :inline="inline" :size="size">
    <el-form-item v-for="(item, index) in formList" :key="index" :prop="item.prop" :label="item.label">
      <!-- solt -->
      <!-- 描述列表 -->
      <el-descriptions v-if="item.type === 'descriptions'" :column="item.column" :labelStyle="{ width: '120px' }">
        <el-descriptions-item v-for="(title, index) in infoTitle" :key="index">
          <template slot="label">{{ title }}</template>
          {{ infoDetail[index] }}
        </el-descriptions-item>
      </el-descriptions>
      <!-- 普通输入框 -->
      <el-input
        v-if="item.type === 'input' || item.type === 'password'"
        v-model="form[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        clearable
      />
      <!-- 长文本输入框 -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model.trim="form[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        :autosize="{ minRows: 2, maxRows: 10 }"
        clearable
      />
      <!-- 计数器 -->
      <el-input-number
        v-if="item.type === 'inputNumber'"
        v-model="form[item.prop]"
        size="small"
        :min="item.min"
        :max="item.max"
      />
      <!-- 选择框 -->
      <el-select
        v-if="item.type === 'select'"
        v-model="form[item.prop]"
        :disabled="item.disabled"
        clearable
        filterable
        :placeholder="item.placeholder"
        @change="handleEvent"
      >
        <el-option
          v-for="(c_item, c_index) in optionList[item.optionListName]"
          :key="c_index"
          :label="c_item.label ? c_item.label : c_item.dictText ? c_item.dictText : c_item[item.optionLabel]"
          :value="c_item.value ? c_item.value : c_item.dictValue ? c_item.dictValue : c_item[item.optionValue]"
        />
      </el-select>
      <!-- 日期选择框 -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="form[item.prop]"
        :type="item.dateType"
        :picker-options="item.pickerOptions"
        clearable
        :disabled="item.disabled"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :placeholder="item.placeholder"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <!-- 树型选择框 -->
      <Treeselect
        v-if="item.type === 'treeSelect'"
        v-model="form[item.prop]"
        :options="optionTree"
        :placeholder="item.placeholder"
        :normalizer="normalizer"
        @select="getTreeNode"
      />
      <!-- 按钮 -->
      <div v-if="item.type === 'button'">
        <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="reset" type="info" icon="el-icon-refresh">重置</el-button>
      </div>
    </el-form-item>
    <!-- 表单操作 -->
    <div v-if="showFormBtn">
      <el-form-item v-for="(item, index) in formbtnList" :key="index">
        <el-button v-if="formbtnList.indexOf('add') > -1" @click="add" type="success" icon="el-icon-plus">
          添加
        </el-button>
      </el-form-item>
    </div>
    <!-- 表格 -->
    <el-table
      :data="dataList"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      border
      fit
      :default-sort="sort"
      :header-cell-style="{ background: '#fafafa' }"
      :max-height="maxHeight"
    >
      <el-table-column
        type="selection"
        v-for="(item, index) in tableList"
        :key="index"
        :align="item.align ? item.align : 'center'"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.type === 'slot'" slot-scope="{ row }">
          <el-tag v-if="item.slot === 'tag'" :type="item.tagType" effect="dark">
            {{ dictChange(row[item.prop]) }}
          </el-tag>
          <div v-else-if="item.slot === 'button'">
            <el-button
              v-if="item.btnAction.indexOf('detail') > -1"
              :type="item.btnType ? item.btnType : 'text'"
              @click="detail(row)"
              >详情</el-button
            >
            <el-button
              v-if="item.btnAction.indexOf('edlt') > -1"
              :type="item.btnType ? item.btnType : 'text'"
              @click="edit(row)"
              >编辑</el-button
            >
            <el-button
              v-if="item.btnAction.indexOf('delete') > -1"
              :type="item.btnType ? item.btnType : 'text'"
              @click="handleDelete(row)"
              >删除</el-button
            >
          </div>
          <div v-else>
            {{ dictChange(row[item.prop]) }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        style="padding-top:1rem;float:right"
      >
      </el-pagination>
    </div>
  </el-form>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'MyForm',
  components: {
    Treeselect
  },
  props: {
    formList: {
      type: Array,
      default: []
    },
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    },
    inline: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    optionList: {
      type: Object,
      default: () => {
        return {}
      }
    },
    infoTitle: {
      type: Array,
      default: []
    },
    inftoDetail: {
      type: Array,
      default: []
    },
    optionTree: {
      type: Array,
      default: []
    },
    showFormBtn: {
      type: Boolean,
      default: true
    },
    dataList: {
      type: Array,
      default: []
    },
    tableList: {
      type: Array,
      default: []
    },
    sort: {
      type: Object,
      default: () => {
        return { prop: 'updateTime', order: 'descending' }
      }
    },
    maxHeight: {
      type: String,
      default: '900'
    },
    pagination: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleEvent(val) {
      this.$emit('handleEvent', val)
    },
    getTreeNode(node) {
      this.$emit('getTreeNode', node)
    },
    normalizer(node) {
      this.$emit('normalizer', node)
    },
    search() {
      this.$emit('search')
    },
    reset() {
      this.$emit('reset')
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  padding: 7px 15px;
  font-size: 14px;
  border-radius: 3px;
}
</style>
